<template>
	<div>
		<div class="appfoot">
			<router-link class="footcomn" to="/">
				<el-icon class="footicon"><HomeFilled /></el-icon>
				<p>首页</p>
			</router-link>
			<router-link class="footcomn" to="/course">
				<el-icon class="footicon"><Menu /></el-icon>
				<p>课程</p>
			</router-link>
			<router-link class="footcomn" to="/column/news">
				<el-icon class="footicon"><Comment /></el-icon>
				<p>资讯</p>
			</router-link>
			<router-link class="footcomn" to="/question">
				<el-icon class="footicon"><QuestionFilled /></el-icon>
				<p>问答</p>
			</router-link>
			<!-- 这里得是按钮 如果没有登陆就要显示登陆按钮 -->
			<div class="footcomn" @click="login">
				<el-icon class="footicon"><Avatar /></el-icon>
				<p>我的</p>
			</div>
		</div>
		<loginbox v-if="loginDialogVisible" @custom-event="login" :key="key"></loginbox>
		<div class="indexfoot columnLayout">
			<div class="footman">
				<div class="footnav Horizontalspacing space-around">
					<div class="footerlo">
						<span>关注我们</span>
						<img src="http://ceostyle.ceotheme.com/ceoedu/images/ceo-ma.png" />
						<p>DEXC区块链学院</p>
					</div>
					<div class="Horizontalspacing space-around maxgap">
						<div class="columnLayout interval">
							<span>快捷导航</span>
							<router-link class="minfont grey" to="/user/settings">个人资料</router-link>
							<router-link class="minfont grey" to="/user/order">我的订单</router-link>
							<router-link class="minfont grey" to="/user/mycourse">我的课程</router-link>
							<router-link class="minfont grey" to="/user/mycourse">讲师入住</router-link>
						</div>
						<div class="columnLayout interval">
							<span>平台社区</span>
							<router-link class="minfont grey" to="/user">个人中心</router-link>
							<router-link class="minfont grey" to="/question">问答社区</router-link>
							<router-link class="minfont grey" to="/askaquestion">我要提问</router-link>
						</div>
						<div class="columnLayout interval">
							<span>关于我们</span>
							<a class="minfont grey" href="http://" target="_blank" rel="noopener noreferrer">关于我们</a>
							<a class="minfont grey" href="http://" target="_blank" rel="noopener noreferrer">加入我们</a>
						</div>
						<div class="columnLayout interval">
							<span>联系我们</span>
							<a class="minfont grey" href="http://" target="_blank" rel="noopener noreferrer">联系我们</a>
							<a class="minfont grey" href="http://" target="_blank" rel="noopener noreferrer">广告合作</a>
						</div>
					</div>
					<div class="columnLayout interval">
						<div class="Customerservicebutton Horizontalspacing minxgap center">
							<div class="iconfont icon-qq centerend"></div>
							<span>客服QQ:</span>
							<span>88888888</span>
						</div>
						<div class="Horizontalspacing minxgap center"><span>客服邮箱:</span><span>vip@88888888.com</span></div>
						<span class="center">周一至周五 9:00-18:00</span>
					</div>
				</div>
			</div>
			<div class="footmans">
				<div class="footnavs Horizontalspacing space-around grey">
					<div class="Horizontalspacing minxgap"><span>© 2023 DEXC区块链学院 - DEXC.PRO</span><span>All rights reserved</span></div>
					<div>Theme By DEXC</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import loginbox from '@/components/loginbox'
	import { mapState } from 'vuex'
	import { Logoutoflogin } from '@/api/api'
	export default {
		name: 'name',
		computed: {
			...mapState(['logon', 'user']),
		},
		components: {
			// 组件
			loginbox,
		},
		data() {
			return {
				loginDialogVisible: false,
				key: 0,
			}
		},
		methods: {
			login() {
				if (!this.logon) {
					this.key++
					this.loginDialogVisible = true
				} else {
					this.$router.push('/user')
				}
			},
		},
	}
</script>
<style scoped>
	.appfoot {
		display: none;
	}
	@media screen and (max-width: 860px) {
		.indexfoot {
			display: none;
		}
		.appfoot {
			position: fixed;
			padding: 0.05rem 0.1rem;
			width: 100vw;
			display: flex;
			flex-direction: row;
			justify-content: space-between; /* 可以根据需要调整对齐方式 */
			align-items: center; /* 可以根据需要调整垂直对齐方式 */
			box-shadow: 0 -1px 8px #ededed;
			height: 0.45rem;
			background: #ffffff;
			z-index: 99;
			bottom: 0rem;
			left: 0rem;
		}
		.footcomn {
			display: flex;
			flex-direction: column;
			justify-content: center; /* 垂直方向上居中 */
			align-items: center;
			font-size: 0.1rem; /* 水平方向上居中 */
		}
		.footicon {
			font-size: 0.2rem;
		}
	}
</style>
